// todo ======================= 获取学员数据 =======================
renderList()
function renderList() {
  axios.get('/student/list').then(({ data: { code, data, message } }) => {
    // console.log(res)
    if (code !== 0) return alert(message)
    qs('tbody').innerHTML = data
      .map(
        (item, index) => `
    <tr>
      <th scope="row">${index + 1}</th>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.sex}</td>
      <td>${item.group}</td>
      <td>${item.phone}</td>
      <td>${item.salary}</td>
      <td>${item.truesalary}</td>
      <td>${item.province + item.city + item.county}</td>
      <td>
        <button type="button" class="btn btn-primary btn-sm" data-id="${item.id}">修改</button>
        <button type="button" class="btn btn-danger btn-sm" data-id="${item.id}">删除</button>
      </td>
    </tr>
  `
      )
      .join('')
  })
}
// todo ======================= 添加显示弹层 =======================
qs('#addBtn').addEventListener('click', function () {
  qs('#addModal').classList.toggle('show')
  qs('#backdrop').classList.toggle('show')
})
// 关闭弹窗
qsAll('.btn-close').forEach((item) => {
  item.addEventListener('click', function () {
    qs('#backdrop').classList.toggle('show')
    Array.from(qsAll('form')).map((i) => i.reset())

    if (qs('#addModal').classList.contains('show')) return qs('#addModal').classList.toggle('show')
    qs('#updateModal').classList.toggle('show')
  })
})
// todo ======================= 获取省 =======================
// 两个表单都需要获取省份
axios.get('/geo/province').then(({ data: res }) => {
  // console.log(res)
  qsAll('[name=province]').forEach((item) => {
    let htmlStr = '<option selected value="">--省--</option>'
    res.forEach((i) => {
      htmlStr += `<option value="${i}">${i}</option>`
    })
    item.innerHTML = htmlStr
    // console.log(item)
  })
})
// todo ======================= 省切换的时候，选择市 =======================
qsAll('[name=province]').forEach((item, index) => {
  item.addEventListener('change', function () {
    if (!this.value) return
    const pname = this.value
    axios.get('/geo/city', { params: { pname } }).then(({ data: res }) => {
      // console.log(res)
      let htmlStr = '<option selected value="">--市--</option>'
      res.forEach((i) => {
        htmlStr += `<option value="${i}">${i}</option>`
      })
      qsAll('[name=city]')[index].innerHTML = htmlStr
      qsAll('[name=county]')[index].innerHTML = '<option selected value="">--县--</option>'
    })
  })
})
// todo ======================= 市切换的时候，选择县 =======================
qsAll('[name=city]').forEach((item, index) => {
  item.addEventListener('change', function () {
    if (!this.value) return
    const pname = qsAll('[name=province]')[index].value
    const cname = this.value
    axios.get('/geo/county', { params: { pname, cname } }).then(({ data: res }) => {
      // console.log(res)
      let htmlStr = '<option selected value="">--县--</option>'
      res.forEach((i) => {
        htmlStr += `<option value="${i}">${i}</option>`
      })
      qsAll('[name=county]')[index].innerHTML = htmlStr
    })
  })
})

// todo ======================= 添加完成 =======================
//新增
qs('#addModal form').addEventListener('submit', function (e) {
  e.preventDefault()
  const data = getData('#addModal')
  //   const data = {}
  //   qsAll('#addModal [type=text]').forEach(item => {
  //     data[item.name] = item.value.trim()
  //   })
  //   qsAll('#addModal select').forEach(item => {
  //     data[item.name] = item.value
  //   })
  //   qsAll('#addModal [type=radio]').forEach(item => {
  //     if (item.checked) data[item.name] = item.value
  //   })
  // console.log(data)

  for (const key in data) {
    if (!data[key]) return alert('请完善表单')
  }
  const { name, phone, salary, county, city, province, truesalary, group, age, sex } = data
  axios.post('/student/add', { name, phone, salary, county, city, province, truesalary, group, age, sex }).then(({ data: { code, message } }) => {
    // console.log(res)
    if (code !== 0) return alert(message)

    qs('#addModal .btn-close').click()
    // 成功 渲染页面
    renderList()
  })
})
// 修改
qs('#updateModal form').addEventListener('submit', function (e) {
  e.preventDefault()
  const falg = Ack()
  if (!falg) return qs('#updateModal .btn-close').click()
  // console.log(id)
  const data = getData('#updateModal')
  const { name, phone, salary, county, city, province, truesalary, group, age, sex } = data
  axios.put('/student/update', { id, name, phone, salary, county, city, province, truesalary, group, age, sex }).then(({ code, message }) => {
    // console.log(res)
    // if (code !== 0) return
    qs('#updateModal .btn-close').click()
    renderList()
    // alert(message)
  })
})
function getData(element) {
  const data = {}
  qsAll(element + ' [type=text]').forEach((item) => {
    data[item.name] = item.value.trim()
  })
  qsAll(element + ' select').forEach((item) => {
    data[item.name] = item.value
  })
  qsAll(element + ' [type=radio]').forEach((item) => {
    if (item.checked) data[item.name] = item.value
  })
  return data
}
// todo ======================= 修改显示弹层 =======================
// 修改学员 / 删除学员(事件委托)
// let id
qs('tbody').addEventListener('click', function (e) {
  if (e.target.classList.contains('btn-primary')) {
    qs('#updateModal').classList.toggle('show')
    qs('#backdrop').classList.toggle('show')
    id = e.target.dataset.id
    axios.get('/student/one', { params: { id } }).then(({ data: { code, data } }) => {
      // console.log(res)
      if (code !== 0) return alert(message)
      qs('#updateModal [name=name]').value = data.name
      qs('#updateModal [name=age]').value = data.age
      qs('#updateModal [name=group]').value = data.group
      qs('#updateModal [name=phone]').value = data.phone
      qs('#updateModal [name=salary]').value = data.salary
      qs('#updateModal [name=truesalary]').value = data.truesalary
      qs('#updateModal [name=province]').value = data.province
      qs('#updateModal [name=city]').innerHTML = `<option selected value="${data.city}">${data.city}</option>`
      qs('#updateModal [name=county]').innerHTML = `<option selected value="${data.county}">${data.county}</option>`
      if (data.sex === '女') qs('#updateModal [value=女]').checked = true
    })

    // axios.put('/student/update', { id, name, phone, salary, county, city, province, truesalary, group, age, sex }).then(res => {
    //   console.log(res)
    // })
  }
  // 删除
  if (e.target.classList.contains('btn-danger')) {
    const id = e.target.dataset.id
    // console.log(id)
    axios.delete('/student/delete', { params: { id } }).then(({ data: { code, message } }) => {
      // console.log(code, message)
      if (code !== 0) return alert(message)
      renderList()
    })
  }
})
// todo ======================= 修改学员 - 确认修改 =======================
function Ack() {
  return confirm('确认修改吗?')
}
